<template>
  <div>
    <div class="layout">
      <Layout>
        <Header >
          <Menu mode="horizontal" theme="light" active-name="1">
            <div class="layout-nav" style="height: 60px;">
              <ul class="location location-position" style=" list-style-type:none !important;">
                <li>
                  <Dropdown placement="bottom-start">
                    <a href="javascript:void(0)">
                      <Icon type="ios-location" class="icon"></Icon> {{city}}
                    </a>
                    <DropdownMenu slot="list">
                      <div class="city" >
                        <p v-for="(items, index) in cityArr" :key="index" >
                          <span v-for="(item, index) in items" class="city-item"  :key="index" @click="changeCity(item)">{{item}}</span>
                        </p>
                      </div>
                    </DropdownMenu>
                  </Dropdown>
                </li>
              </ul>
              <span style="margin: -19px -25px 0 0;">
                <img src="../../../static/img/logo1.png"  style="width: 100px ; height: 100px; "/>
              </span>
              <router-link to="/">
                <MenuItem name="1">
                  <Icon type="home" style="font-size: 23px;vertical-align: middle;"></Icon>
                  商城首页
                </MenuItem>
              </router-link>
              <router-link to="/goodsList">
                <MenuItem name="2">
                  <Icon type="android-apps" style="font-size: 27px"></Icon>
                  全部商品
                </MenuItem>
              </router-link>
              <router-link to="/home/myShoppingCart">
                <MenuItem name="3" >
                  <Icon type="ios-cart-outline"></Icon>
                  购物车
                </MenuItem>
              </router-link>
              <router-link to="/freeback">
                <MenuItem name="4">
                  <Icon type="ios-paper"></Icon>
                  意见反馈
                </MenuItem>
              </router-link>
              <ul style="list-style-type: none">
                <li class="first header-nav" v-show="!userInfo.nickName">
                  <router-link to="/login">登录
                    <Icon type="person"></Icon>
                  </router-link> |
                  <span class="text-color-red">
                    <router-link to="/SignUp">免费注册
                      <Icon type="person-add"></Icon>
                    </router-link>
                  </span>
                </li>
                <li class="user-userinfo" v-show="userInfo.nickName">
                  <Dropdown>
                    <div class="username-p" style="display: flex;">
                      <span style="margin: 5px 5px 0 0;"><img :src="avatar"  style="width: 50px ; height: 50px; "/></span>
                      <span class="username">{{userInfo.nickName}}</span>
                    </div>
                    <DropdownMenu slot="list">
                      <div class="my-page">
                        <div class="my-info" @click="myInfo">
                          <Icon type="home"></Icon>
                          <p>我的主页</p>
                        </div>
                        <div class="sign-out" @click="signOutFun">
                          <Icon type="log-out"></Icon>
                          <p>退出登录</p>
                        </div>
                      </div>
                    </DropdownMenu>
                  </Dropdown>
                </li>
              </ul>
            </div>
          </Menu>
        </Header>
      </Layout>
    </div>
  </div>
</template>

<script>
  import store from '@/vuex/store';
  import { mapState, mapActions } from 'vuex';
  export default {
    name: 'M-Header',
    created() {
      this.isLogin();
      this.getAvatar();
    },
    data() {
      return {
        avatar:"",
        city: '宜昌',
        cityArr: [
          ['北京', '上海', '天津', '重庆', '广州'],
          ['深圳', '河南', '辽宁', '吉林', '江苏'],
          ['江西', '四川', '海南', '贵州', '云南'],
          ['西藏', '陕西', '甘肃', '青海', '宜昌']
        ]
      };
    },
    computed: {
      ...mapState(['userInfo', 'shoppingCart'])
    },
    methods: {
      ...mapActions(['signOut', 'isLogin']),
      changeCity(city) {
        this.city = city;
      },
      getAvatar(){
        if (this.userInfo.nickName) {
          this.avatar = this.userInfo.avatar
        }
      },
      myInfo() {
        this.$router.push({path: "/home"});
      },
      signOutFun() {
        this.signOut();
        this.$Message.success('成功退出！');
        this.$router.push('/Login');
      }
    },
    store
  };
</script>

<style scoped>

  .layout{
    border: 1px solid #d7dde4;
    background-color: #ffffff;
    position: relative;
    border-radius: 4px;
    overflow: visible;

    width: 100%;
    height: 60px;
    background-color: #ffffff;
  }



  .layout>>>div.ivu-layout-header{
    padding: 0px;
    background:#ffffff
  }

  .layout-nav{
    margin-left: 69px;
    width: 86%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .layout-nav .location-position {
    margin-top: 0px;
    list-style: none;
  }

  .nav ul {
    margin-top: 0px;
    list-style: none;
  }

  .nav li {
    float: left;
    font-size: 14px;
    line-height: 35px;
    margin-right: 15px;
    font-weight: bold;
  }

  .layout-nav>>>li.ivu-menu-item:hover,.layout-nav>>>li.ivu-menu-item-active,.layout-nav>>>li.ivu-menu-item{
    border: none !important;
  }

  .layout-nav>>>li.ivu-menu-item>i {
    font-size: 23px;
    vertical-align: middle;
    padding-bottom: 2px;
  }

  .nav .header-nav{
    float: left;
    font-size: 14px;
    line-height:  35px;
    font-weight: bold;
    margin-top: 13px;
    margin-left:380px;
  }

  .nav .user-userinfo{
    float: left;
    font-size: 14px;
    line-height:  35px;
    font-weight: bold;
    margin-left:422px;
  }

  .location a {
    border-left: none;
  }

  .nav a:hover {
    color: #d9534f;
  }

  .location {
    color: #999999;
  }

  .icon {
    color: #d9534f;
  }

  .first {
    color: #999999;
  }

  .first a:first-child {
    padding-left: 3px;
    border-left: none;
  }

  .city {
    padding: 10px 15px;
  }

  .city-item {
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }

  .city-item:hover {
    color: #d9534f;
  }

  .username {
    color: #999999;
  }

  .username-p {
    cursor: pointer;
  }

  .my-page {
    padding: 3px 5px;
    width: 180px;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .my-page a {
    margin: 0px;
    padding: 0px;
    border: none;
  }

  .my-info {
    padding: 5px;
    width: 50%;
    height: 100%;
    text-align: center;
    cursor: pointer;
  }

  .my-info:hover {
    box-shadow: 0px 0px 5px #ccc;
  }

  .my-info i {
    font-size: 28px;
  }

  .my-info p {
    font-size: 12px;
    line-height: 30px;
    margin-top: -10px;
  }

  .sign-out {
    padding: 5px;
    width: 50%;
    height: 100%;
    text-align: center;
    cursor: pointer;
  }

  .sign-out:hover {
    box-shadow: 0px 0px 5px #ccc;
  }

  .sign-out i {
    font-size: 28px;
  }

  .sign-out p {
    font-size: 12px;
    line-height: 30px;
    margin-top: -10px;
  }
</style>
